<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结算</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <style type="text/css">
        /*您可以将下列样式写入自己的样式表中*/
        .childBody {
            padding: 15px;
        }

        /*layui 元素样式改写*/
        .layui-btn-sm {
            line-height: normal;
            font-size: 12.5px;
        }

        .layui-table-view .layui-table-body {
            min-height: 196px;
        }

        /* 改变下拉框和文本框的行高 */
        .layui-table-cell, .layui-input, .layui-unselect, .layui-select {
            height: 30px;
            line-height: 30px;
            bottom: 0;
        }

        /*设置 layui 表格中单元格内容溢出可见样式*/
        .table-overlay .layui-table-view,
        .table-overlay .layui-table-box,
        .table-overlay .layui-table-body {
            overflow: visible;
        }

        .table-overlay .layui-table-cell {
            height: auto;
            overflow: visible;
        }

        /*文本对齐方式*/
        .text-center {
            text-align: center;
        }

        /**
        *遮罩层
         */
        .mask {
            position: fixed;
            top: 0px;
            height: 100%;
            width: 100%;
            filter: alpha(opacity=60);
            background-color: white;
            z-index: 10000000;
            left: 0px;
            opacity: 0.01;
            -moz-opacity: 0.01;
            display: none;
        }
    </style>

</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
     style="padding: 0px 10px 0 10px;">
    <form class="layui-form" action="" lay-filter="component-form-element">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-lg12" style="float: none;">
                <!-- 头部表格 -->
                <table style="width: 100%;height: 50px;">
                    <tr style="color:#454c51;text-align: center;padding-bottom: 10px;;border-bottom:2px solid darkgray;">
                        <td style="width: 40%;">房间：<label id="roomName"></label></td>
                        <td style="width: 20%;"><label style="font-size:30px;">结算清单</label></td>
                        <td style="width: 40%;">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="float: none;display: contents;">
                                    到店：<u id="real_in_date"></u></label>
                                <label class="layui-form-label" style="float: none;display: contents;">&nbsp;&nbsp;&nbsp;&nbsp;
                                    离店：<u id="real_out_date"></u></label>
                                <label class="layui-form-label" style="float: none;display: contents;">&nbsp;&nbsp;&nbsp;&nbsp;共
                                    <span id="out_totalDay">1</span> 天</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="tableRes" class="table-overlay">
                <!-- 主表格，用于选择订单详情 -->
                <table id="dataTable" lay-filter="dataTable" style="margin-bottom: 0px;"></table>

                <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 0;">
                    <legend>基本信息</legend>
                </fieldset>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <td>
                            <div class="layui-inline">
                                <label class="layui-form-label">主客姓名</label>
                                <div class="layui-input-inline">
                                    <input id="cname" type="text" class="layui-input" style="width: 100px"
                                           readonly>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="layui-inline">
                                <label class="layui-form-label">预付款(元)：</label>
                                <div class="layui-input-inline">
                                    <input id="predictMoney" type="text" class="layui-input" style="width: 100px"
                                           readonly>
                                </div>
                            </div>
                        <td>
                            <div class="layui-inline">
                                <label class="layui-form-label">退押金(元)：</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" style="width: 90px" id="deposit" readonly>
                                </div>
                            </div>
                        </td>
                        <td id="orderType">
                        </td>
                        <td>
                            <label class="capital" id="amount" style="color: #ef5353;font-size:40px;">0.00</label>
                        </td>
                    </tr>
                    <tr id="alipay">
                        <td>付款方式</td>
                        <td>
                            <div class="layui-input-inline" style="width: 90px">
                                <select lay-filter="zhifus" id="zhifus">
                                    <option value="0">支付宝</option>
                                    <option value="1">现金</option>
                                </select>
                            </div>
                        </td>
                        <td colspan="3">
                            <input onclick="pay()" class="layui-btn layui-btn-sm" style="width: 70px;" value="确认付款">
                            <input onclick="checkPay()" class="layui-btn layui-btn-xs layui-btn-radius"
                                   style="width: 40px;" value="刷新">
                            <span id="payStatus">待付款</span>
                        </td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div id="action" class="text-center">
            <button type="button" name="btnSave" class="layui-btn" lay-submit lay-filter="*">
                <i class="layui-icon layui-icon-ok-circle"></i>结算
            </button>
            <button type="reset" name="btnReset" class="layui-btn layui-btn-primary" onclick="closeThis()">取消
            </button>
        </div>
    </form>
</div>
<div id="mask" class="mask"></div>
<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script>
    var orderNumber = "";
    var orderN = "";


    //点击确认付款
    function pay() {
        orderN = orderNumber + new Date().getMilliseconds() + "T"
        var zhifus = $("#zhifus").val();
        var totalPrice = $("#amount").text();
        if (zhifus == "0") {
            var payURL = "/desk/pay?payMoney=" + totalPrice + "&orderNumber=" + orderN;
            var winObj = window.open(payURL, 'newwindow', 'height=650, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
            $(winObj).on("unload", function () {
                checkPay();
            })
        } else {
            $("#payStatus").text("已付款")
        }
    }

    function checkPay() {
        var index = layer.load(2, {shade: 0.1}); //0代表加载的风格，支持0-2
        //窗口关闭时到数据库查询该订单是否付款成功
        $.ajax({
            url: "/room_predict_order/payFind",
            type: 'get',
            dataType: 'json',
            data: {"orderNumber": orderN},
            success: function (data) {
                layer.close(index);
                $("#payStatus").text(data.msg);
            },
            error: function () {
                layer.close(index);
                parent.layer.alert("信息获取失败！");
                return;
            }
        });
    }

    //格式化金额
    function formatPrice(value) {
        value = value.replace(/[\.]$/, '');
        value = value.replace(/(.*)\.([\d]{2})(\d*)/g, '$1.$2');
        value = Number(value).toFixed(2);
        var logNum = value.toString();
        if (logNum.match(/\./g) != null) {
            integerNum = parseInt(logNum).toString().replace(/\d(?=(\d{3})+$)/g, '$&,');
            decimalNum = '.' + logNum.replace(/(.*)\.(.*)/g, '$2');
        }
        return decimalNum;
    }

    //获取url参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    //关闭该层
    function closeThis() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    var ROOMID = getQueryVariable("id");
    var ROOMDATA;

    /* 基础配置 */
    var tableData = [];

    //下拉框初始化
    $.ajax({
        url: "/checkOut/toCheckOut",
        type: 'get',
        dataType: 'json',
        async: false,//设置阻断
        data: {"id": ROOMID},
        success: function (datas) {
            ROOMDATA = datas;
            orderNumber = datas.base.orderNumber;
            if (datas.base.orderType == "需补缴") {
                $("#alipay").show(300);
            } else {
                $("#alipay").hide(300);
            }
            $("#roomName").html(datas.base.roomName + "&nbsp;&nbsp;&nbsp;&nbsp;" + datas.base.roomType);
            $("#real_in_date").text(datas.base.real_in_date);
            $("#real_out_date").text(datas.base.real_out_date);
            $("#cname").val(datas.base.cname);
            $("#predictMoney").val(datas.base.predictMoney);
            $("#deposit").val(datas.base.deposit);
            $("#amount").text(datas.base.amount.toFixed(2));
            $("#out_totalDay").text(datas.base.RealDays);
            $("#orderType").text(datas.base.orderType);
            tableData = datas.base.products;


        },
        error: function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.layer.alert("信息获取失败！");
            return;
            var datas =
                {
                    "base": {
                        "roomName": "301",
                        "roomType": "双人间",
                        "real_in_date": "2020-3-6 13:42:21",
                        "real_out_date": "2020-3-8 13:42:21",
                        "cname": "张三",
                        "predictMoney": 80,
                        "deposit": 100,
                        "amount": 17
                    },
                    "product": [
                        {"type": "房费", "date": "2020-3-4", "price": 80, "number": 1, "allprice": 80},
                        {"type": "可乐", "productId": "1", "date": "2020-3-4", "price": 3.5, "number": 2, "allprice": 7},
                        {"type": "泡面", "productId": "2", "date": "2020-3-4", "price": 5, "number": 2, "allprice": 10}
                    ]
                };
            ROOMDATA = datas.products;
            console.log(datas);
            $("#roomName").html(datas.base.roomName + "&nbsp;&nbsp;&nbsp;&nbsp;" + datas.base.roomType);
            $("#real_in_date").text(datas.base.real_in_date);
            $("#real_out_date").text(datas.base.real_out_date);
            $("#cname").val(datas.base.cname);
            $("#predictMoney").val(datas.base.predictMoney);
            $("#deposit").val(datas.base.deposit);
            $("#amount").text(datas.base.amount.toFixed(2));
            tableData = datas.product;
        }
    });

    window.viewObj = {
        tbData: tableData
    };
</script>
<script>
    /** layui配置 */
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table', 'laydate'], function () {
            var $ = layui.$
                , form = layui.form
                , table = layui.table;
            //数据表格实例化
            var layTableId = "layTable";
            var tableIns = table.render({
                elem: '#dataTable',
                id: layTableId,
                data: viewObj.tbData,
                cellMinWidth: 60,
                totalRow: true,
                loading: true,
                even: false,
                cols: [[
                    {field: 'tempId', title: '序号', type: 'numbers', totalRowText: '合计'},
                    {field: 'type', title: '记账项目'},
                    {field: 'date', title: '日期'},
                    {field: 'price', title: '单价', totalRow: true},
                    {field: 'number', title: '数量', totalRow: true},
                    {field: 'allprice', title: '小计(元)', totalRow: true},
                    {field: 'productId', hide: true}
                ]]
            });

            //验证表单
            form.on('submit(*)', function (data) {
                if ($("#orderType").text() == "需补缴" && $("#payStatus").text() != "已付款") {
                    layer.msg("请先支付!", {icon: 5});
                    return;
                }
                var load = layer.load(2, {shade: 0.1}); //2代表加载的风格，支持0-2
                $.ajax({
                    url: "/checkOut/checkOut",
                    type: 'post',
                    data: {
                        "roomId": ROOMID,
                        "orderType": ROOMDATA.base.orderType,
                        "payType": $("#zhifus").val(),
                        "amount": ROOMDATA.base.amount,
                        "depOrderNumber": orderN
                    },
                    dataType: 'json',
                    async: false,//设置阻断
                    success: function (data) {
                        layer.close(load);//关闭加载窗
                        closeThis();
                        parent.layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                    },
                    error: function () {
                        layer.close(load);//关闭加载窗
                        closeThis();
                        parent.layer.msg("无响应！请重试", {icon: 5, zIndex: layer.zIndex + 100});
                    }
                });
            });
        }
    )
</script>
</body>
</html>